<!DOCTYPE html>
<html lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Material Style - Responsive Email Template</title>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--[if !mso]>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <![endif]-->
    <style type="text/css">.ReadMsgBody {
        width: 100%;
        background-color: #ffffff;
      }

      .ExternalClass {
        width: 100%;
        background-color: #ffffff;
      }

      body {
        width: 100%;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
      }

      table {
        border-collapse: collapse;
      }

      /* Remove ios blue links */

      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }

      @media only screen and (max-width: 640px) {
        body[yahoo] .deviceWidth {
          width: 440px!important;
          padding: 0;
        }
        body[yahoo] .center {
          text-align: center!important;
        }
      }

      @media only screen and (max-width: 479px) {
        body[yahoo] .deviceWidth {
          width: 280px!important;
          padding: 0;
        }
        body[yahoo] .center {
          text-align: center!important;
        }
      }
    </style>
  </head>
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix">
    <!-- hidden preheader text - Remember to change it! -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Roboto', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;mso-hide:all;"> Material Style - Responsive Email Template </div>
    <!-- Wrapper -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
          <!--Start Header-->
          <table width="700" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td style="padding: 6px 0px 0px">
                <table width="680" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                  <tr>
                    <td width="100%">
                      <!--Start logo-->
                      <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                        <tr>
                          <td class="center" style="padding: 10px 0px 20px 0px">
                            <a href="#">
                              <img src="assets/img/email/logo_blue.png">
                            </a>
                          </td>
                        </tr>
                      </table>
                      <!--End logo-->
                      <!--Start nav-->
                      <table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
                        <tr>
                          <td class="center" style="font-size: 13px; color: #272727; font-weight: light; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 10px 0px 10px 0px;">
                            <a href="#" style="text-decoration: none; color: #03A9F4;">PORTFOLIO</a> &nbsp; &nbsp;
                            <a href="#" style="text-decoration: none; color: #03A9F4;">SERVICES</a> &nbsp; &nbsp;
                            <a href="#" style="text-decoration: none; color: #03A9F4;">BLOG</a> &nbsp; &nbsp;
                            <a href="#" style="text-decoration: none; color: #03A9F4;">CONTACT</a>
                          </td>
                        </tr>
                      </table>
                      <!--End nav-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!--End Header-->
          <!-- Start Headliner-->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td valign="top" style="padding: 0px " class="center">
                <a href="#">
                  <img class="deviceWidth" src="assets/img/email/header_mail2.jpg">
                </a>
              </td>
            </tr>
          </table>
          <!-- Start Headliner-->
          <!--Start Two Blocks-->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td width="100%" bgcolor="#ffffff">
                <!-- Left box  -->
                <table width="49%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                  <tr>
                    <td class="center">
                      <table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td valign="top" style="padding: 20px 0px " class="center">
                            <a href="#">
                              <img width="80" hight="80" src="assets/img/email/icon_cloud.png">
                            </a>
                          </td>
                        </tr>
                      </table>
                      <table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td class="center" style="font-size: 16px; color: #263238; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 0px 10px; "> Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                          <td class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Consectetur adipisicing elit. Aliquam vero officia ducimus molestiae magnam temporibus, maxime, ratione id repellat eum quibusdam, alias. </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!--End left box-->
                <!--Right box-->
                <table width="49%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                  <tr>
                    <td class="center">
                      <table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td valign="top" style="padding: 20px 0px " class="center">
                            <a href="#">
                              <img width="80" hight="80" src="assets/img/email/icon_download.png">
                            </a>
                          </td>
                        </tr>
                      </table>
                      <table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td class="center" style="font-size: 16px; color: #263238; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 0px 10px; "> Consectetur adipisicing elit </td>
                        </tr>
                        <tr>
                          <td class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Consectetur adipisicing elit. Aliquam vero officia ducimus molestiae magnam temporibus, maxime, ratione id repellat eum quibusdam, alias. </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!--End right box-->
              </td>
            </tr>
          </table>
          <!--End Two Blocks -->
          <!--Start Two Pictures-->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td width="100%" bgcolor="#ECEFF1">
                <!--Right box-->
                <table width="40%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                  <tr>
                    <td valign="top" style="padding: 40px 20px " class="center">
                      <a href="#">
                        <img width="300" hight="170" src="assets/img/email/mail300_1.jpg">
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td class="center" style="font-size: 16px; color: #263238; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 0px 10px 0;"> Feature Image Title </td>
                  </tr>
                  <tr>
                    <td class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Quibusdam nostrum dolorum at eum ab recusandae necessitatibus voluptatum nam ea, tempore veniam reprehenderit rerum error iste sunt dicta. </td>
                  </tr>
                </table>
                <!--End left box-->
                <!-- Left box  -->
                <table width="40%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
                  <tr>
                    <td valign="top" style="padding: 40px 20px " class="center">
                      <a href="#">
                        <img width="300" hight="170" src="assets/img/email/mail300_2.jpg">
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td class="center" style="font-size: 16px; color: #263238; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 0px 10px;"> Feature Image Title </td>
                  </tr>
                  <tr>
                    <td class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Quibusdam nostrum dolorum at eum ab recusandae necessitatibus voluptatum nam ea, tempore veniam reprehenderit rerum error iste sunt dicta. </td>
                  </tr>
                </table>
                <!--End left box-->
              </td>
            </tr>
          </table>
          <!--End Two Pictures-->
          <div style="height:15px">&nbsp;</div>
          <!-- divider -->
          <!--Start Discount -->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td width="100%" bgcolor="#ffffff">
                <!-- Left Box  -->
                <table width="70%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                  <tr>
                    <td class="center">
                      <table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td class="center" style="font-size: 22px; color: #687074; font-weight: 400; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 36px; vertical-align: middle; padding: 20px 10px 10px;"> Discover our latest news and offers </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!--End Left Box-->
                <!--Right Box-->
                <table width="30%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                  <tr>
                    <td style=" padding: 15px 20px 30px;">
                      <table align="center">
                        <tr>
                          <td align="center">
                            <a style="background-color: #03A9F4; border-top: 10px solid #03A9F4; border-right: 22px solid #03A9F4; border-bottom: 8px solid #03A9F4; border-left: 22px solid #03A9F4; display: inline-block; color: #fff; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase;"
                              href="#" target="_blank">GET STARTED</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!--End Right Box-->
              </td>
            </tr>
          </table>
          <!--End Discount -->
          <!--Start Three Blocks-->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td width="100%" bgcolor="#ECEFF1">
                <!-- Top  -->
                <table width="70%" border="0" cellpadding="0" cellspacing="0" align="center">
                  <tr>
                    <td class="center" style="font-size: 16px; color: #263238; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 50px 0px; "> They already trust us </td>
                  </tr>
                  <tr>
                    <td width="50%" class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Delectus quod harum a molestiae sunt fugit, vitae, unde repellat omnis dolore quaerat! Ratione aliquam voluptatem voluptatum ut cum, voluptates, non adipisci vel eligendi aperiam inventore odit nemo impedit. </td>
                  </tr>
                </table>
                <!--End Top-->
              </td>
            </tr>
            <!--Start 3 Images Row 1 -->
            <tr>
              <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                  <td width="100%" bgcolor="#CFD8DC">
                    <!-- Start Image 1-->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/nokia.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 1-->
                    <!--Start Image 2-->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/sony.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 2-->
                    <!--Start Image 3-->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/maxis.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 3-->
                  </td>
                </tr>
              </table>
            </tr>
            <!-- End 3 Images Row 1 -->
            <!--Start 3 Images Row 2-->
            <tr>
              <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                  <td width="100%" bgcolor="#CFD8DC">
                    <!-- Start Image 1   -->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/microsoft.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 1-->
                    <!--Start Image 2-->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/intel.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 2-->
                    <!--Start Image 3-->
                    <table width="33%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                      <tr>
                        <td valign="top" style="padding: 20px 30px " class="center">
                          <a href="#">
                            <img width="144" hight="144" src="assets/img/email/samsung.png">
                          </a>
                        </td>
                      </tr>
                    </table>
                    <!--End Image 3 -->
                  </td>
                </tr>
              </table>
            </tr>
            <!-- End 3 Images Row 2 -->
          </table>
          <!--End Three Blocks -->
          <!--Start Weekly Prize-->
          <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
            <tr>
              <td width="100%" bgcolor="#546E7A" class="center">
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                  <tr>
                    <td valign="top" style="padding: 20px 10px " class="center">
                      <a href="#">
                        <img width="32" hight="32" src="assets/img/email/facebook.png">
                      </a>
                    </td>
                    <td valign="top" style="padding: 20px 10px " class="center">
                      <a href="#">
                        <img width="32" hight="32" src="assets/img/email/twitter.png">
                      </a>
                    </td>
                    <td valign="top" style="padding: 20px 10px " class="center">
                      <a href="#">
                        <img width="32" hight="32" src="assets/img/email/instagram.png">
                      </a>
                    </td>
                  </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                  <tr>
                    <td class="center" style="font-size: 16px; color: #ffffff; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 0px 10px; "> Follow us on social networks </td>
                  </tr>
                  <td class="center" style="font-size: 12px; color: #ffffff; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> Veniam quisquam, voluptate dolor iusto facilis aliquid sint quos. Nesciunt amet quisquam inventore, explicabo, quasi itaque ducimus aperiam maiores numquam. Aspernatur enim fuga, quaerat cumque adipisci, quis similique veniam qui molestiae
                    autem officia sapiente ducimus possimus error. </td>
            </tr>
            </table>
            </td>
      </tr>
      </table>
      <!--Weekly Prize-->
      <!-- Footer -->
      <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
        <tr>
          <td bgcolor="#ffffff" class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 50px 0px 50px; ">
          Copyright © Material Style 2017 </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 0px 0px; "> Eaque cumque reiciendis quae labore atque nobis beatae veniam dolorem commodi. Dicta, illo voluptatibus quia impedit recusandae cumque quis blanditiis dolores nam eius fugiat non, quisquam ipsam. Illo ab expedita delectus fuga. </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" class="center" style="font-size: 12px; color: #687074; font-weight: bold; text-align: center; font-family: 'Roboto', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: middle; padding: 20px 10px; "> If you would prefer not to receive email communications from Material Style click
            <a style="text-decoration: none; color: #3498db;" href="#">here</a>
          </td>
        </tr>
      </table>
      <!--End Footer-->
      </td>
      </tr>
    </table>
    <!-- End Wrapper -->
  </body>
</html>